import {defineComponent, ref,} from "vue";
import wikifengmain from "@/assets/image/wikifengmian.jpg"
import wikitouxiang from "@/assets/image/wikiicon.png"
import {NImage, NCard, NTag, NSpace, NIcon,} from "naive-ui"
import getmycolor from "@/util/mycolor"
import {UserOutlined,} from "@vicons/antd"
import {DateRangeOutlined, ClassOutlined,} from "@vicons/material"

export default defineComponent({
    name: "moren",
    props: {
        // 顶级菜单列表
        menuList: {
            type: Array,
            default() {
                return []
            },
        },
    },
    setup({menuList,},) {
        // 热门标签列表
        const taglist = ref([
            {label: "redis", value: "redis"},
            {label: "mysql", value: "redis"},
            {label: "mongo", value: "mongo"},
            {label: "django", value: "django"},
            {label: "djongo", value: "djongo"},
            {label: "fastapi", value: "fastapi"},
            {label: "golang", value: "golang"},
            {label: "react", value: "react"},
        ])
        // 返回随机颜色
        const fanhuicolor = () => {
            return {color: getmycolor(), textColor: "white"}
        }
        // 站点信息
        const webinfo = ref({
            totalblog: 300, // 文章总数
            totaltime: 1652,    // 运行总时间
            totalfont: 200000,  // 总字数
            totalvisit: 20000,   // 访问总数
            totaluv: 1520,   // 访问的人数
        })
        // 博客列表
        const bloglist = ref([
            {
                name: "结合Multitouch完成我在Mac触摸板上的高效使用",
                author: {
                    name: "放风喽"
                },
                createdTime: "2022-11-12",
                fenlei: "闲言碎语/效率工具/Mac时代",
            },
            {
                name: "结合Multitouch完成我在Mac触摸板上的高效使用",
                author: {
                    name: "放风喽"
                },
                createdTime: "2022-11-12",
                fenlei: "闲言碎语/效率工具/Mac时代",
            },
            {
                name: "结合Multitouch完成我在Mac触摸板上的高效使用",
                author: {
                    name: "放风喽"
                },
                createdTime: "2022-11-12",
                fenlei: "闲言碎语/效率工具/Mac时代",
            },
            {
                name: "结合Multitouch完成我在Mac触摸板上的高效使用",
                author: {
                    name: "放风喽"
                },
                createdTime: "2022-11-12",
                fenlei: "闲言碎语/效率工具/Mac时代",
            },
        ])
        return () => (<div class="w-full">
            <div class="w-full h-400px bg-fixed bg-cover flex flex-col justify-evenly items-center"
                 style={{"backgroundImage": `url(${wikifengmain})`}}>
                <div class="w-full text-center text-5xl text-white font-semibold">我的 WIKI</div>
                <div class="w-full juzhong1">
                    {menuList.map((item:any) => {
                        return <NCard
                            class="w-1/6 max-w-300px h-150px mx-3 bg-white bg-opacity-0 border-0 hover:text-blue-400 cursor-pointer text-white backdrop-blur">
                            <div class="w-full text-center text-xl truncate">{item.label}</div>
                            <div class="w-full my-3 text-base text-center line-clamp-2" title={item.desc}>{ item.desc}</div>
                        </NCard>
                    })}
                </div>
            </div>
            <div class="w-full flex justify-center py-3">
                <div class="w-1200px flex">
                    <div class="w-850px mr-10px">
                        {bloglist.value.map((item, index) => {
                            return <NCard content-style={{padding: "20px"}} class=" mb-10px">
                                <div
                                    class="w-full font-semibold text-2xl mb-5px cursor-pointer hover:text-blue-400 truncate">{item.name}</div>
                                <div class="w-full flex items-center mt-10px">
                                    <div class="flex items-center cursor-pointer hover:text-blue-400" title="作者">
                                        <NIcon size={16}>
                                            <UserOutlined/>
                                        </NIcon>
                                        <span>{item.author.name}</span>
                                    </div>
                                    <div class="flex items-center mx-2 cursor-pointer hover:text-blue-400" title="创作时间">
                                        <NIcon size={16}>
                                            <DateRangeOutlined/>
                                        </NIcon>
                                        <span>{item.createdTime}</span>
                                    </div>
                                    <div class="flex items-center cursor-pointer hover:text-blue-400" title="分类">
                                        <NIcon size={16}>
                                            <ClassOutlined/>
                                        </NIcon>
                                        <span>{item.fenlei}</span>
                                    </div>
                                </div>
                            </NCard>
                        })}
                    </div>
                    <div class="w-350px">
                        <NCard content-style={{padding: "0"}} class="w-full border !border-gray-400" v-slots={{
                            default: () => <div class="p-10px w-full">
                                <p class="text-xl">作者：<span style="color:#15559a"
                                                            class="cursor-pointer dianji">放风喽</span></p>
                                <p class="text-sm">2006年美国周刊年度风云人物</p>
                                <p class="text-sm">2008年感动中国组委会特别大奖</p>
                                <p class="text-sm">2009年年度地球卫士奖</p>
                                <p class="text-sm">2022年奥林匹克杯获得者</p>
                            </div>,
                            cover: () => <img src={wikitouxiang} alt={"头像"}/>
                        }}>
                        </NCard>
                        <NCard content-style={{padding: "0"}} class="w-full border !border-gray-400 mt-10px">
                            <div class="w-full text-xl font-semibold my-2 ml-10px">文章分类</div>
                            <div class="w-full mb-20px">
                                {menuList.map(item => {
                                    return <div
                                        class="group w-full h-30px flex justify-between items-center cursor-pointer hover:(bg-gray-200 text-blue-500)">
                                        <div class="flex items-center h-full">
                                            <div
                                                class="w-5px h-full bg-blue-400 bg-opacity-0 group-hover:bg-opacity-100"/>
                                            <span class="ml-5px truncate">{item.label}</span>
                                        </div>
                                        <div
                                            class="flex items-center mr-20px h-25px w-25px justify-center bg-gray-400 rounded-1/2 text-white">{item.total || 20}</div>
                                    </div>
                                })}
                            </div>
                        </NCard>
                        <NCard content-style={{padding: "0"}} class=" w-full border !border-gray-400 mt-10px">
                            <div class="w-full ml-10px text-xl font-semibold my-2">热门标签</div>
                            <div class="w-full mb-20px px-10px"><NSpace>
                                {taglist.value.map(item => {
                                    return <NTag class="cursor-pointer dianji" color={fanhuicolor()}>{item.label}</NTag>
                                })}
                            </NSpace></div>
                        </NCard>
                        <NCard content-style={{padding: "0"}} class="w-full border !border-gray-400 mt-10px">
                            <div class="w-full ml-10px text-xl font-semibold my-2">站点信息</div>
                            <div class="w-full mb-20px px-10px">
                                <div class="w-full flex justify-between items-center">
                                    <span>文章总数：</span>
                                    <span>{webinfo.value.totalblog} 篇</span>
                                </div>
                                <div class="w-full flex justify-between items-center">
                                    <span>总运行时间：</span>
                                    <span>{webinfo.value.totaltime} 天</span>
                                </div>
                                <div class="w-full flex justify-between items-center">
                                    <span>总访问次数：</span>
                                    <span>{webinfo.value.totalvisit} 次</span>
                                </div>
                                <div class="w-full flex justify-between items-center">
                                    <span>总访客人数：</span>
                                    <span>{webinfo.value.totaluv} 人</span>
                                </div>
                                <div class="w-full flex justify-between items-center">
                                    <span>总字数：</span>
                                    <span>{webinfo.value.totalfont} 字</span>
                                </div>
                            </div>
                        </NCard>
                    </div>
                </div>
            </div>
        </div>)
    },
})
